<template>
  <div class="packages">
    <div style="position:relative;height:50vh;" ref="refsTable">
      <el-form style="margin-top:10px" :inline="true" label-width="68px" ref="queryForm">
        <el-form-item label="录入时间">
          <el-date-picker
            v-model="value1"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="timeChange1"
            style="width:225px"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="登记时间">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="timeChange2"
            style="width:380px"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="条码号" label-width="58px">
          <el-input clearable v-model="params.barcodeCode" style="width:185px" placeholder="请输入条码号"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="params.barcodeCode"
            :fetch-suggestions="querySearch"
            placeholder="请输入条码号"
            @select="handleSelect"
            @focus="change(0)"
            style="width:185px"
          ></el-autocomplete> -->
        </el-form-item>

        <el-form-item label="登记状态">
          <el-select v-model="params.registerState" placeholder="请选择" style="width:185px">
            <el-option value label="全部"></el-option>
            <el-option
              v-for="item in arr.registerStateArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字">
          <el-input clearable v-model="params.keyword" style="width:225px" placeholder="实验编号/送检单位/姓名"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="params.keyword"
            :fetch-suggestions="querySearch"
            placeholder="请输入关键字"
            @select="handleSelect"
            @focus="change(1)"
            style="width:225px"
          ></el-autocomplete> -->
        </el-form-item>

        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="primary" @click="getList">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <div style="height:300px;overflow-y:auto;"> -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @cell-click="getLRPdata"
        border
        stripe
        :header-cell-style="{ 
      background:'#ebebeb'}"
        highlight-current-row
        :height="heights"
        v-loading="loading"
      >
        <af-table-column align="center" type="index" width="50" label="序号"></af-table-column>
        <af-table-column
          width="120"
          align="center"
          label="条码号"
          prop="barcodeCode"
          show-overflow-tooltip
        ></af-table-column>
        <af-table-column width="150" align="center" label="是否已完成对照">
          <template slot-scope="scope">{{ scope.row.isCompare?'已完成':'未完成' }}</template>
        </af-table-column>
        <af-table-column
          width="350"
          align="center"
          prop="projectTypeName"
          label="项目类型"
          show-overflow-tooltip
        ></af-table-column>

        <af-table-column width="160" align="center" prop="entryDate" label="录入时间"></af-table-column>
        <af-table-column width="80" align="center" prop="submitName" label="送检姓名"></af-table-column>
        <af-table-column
          width="280"
          align="center"
          prop="inspectionUnit"
          label="送检单位"
          show-overflow-tooltip
        ></af-table-column>

        <af-table-column width="150" align="center" prop="professionalGroupName" label="专业组"></af-table-column>
        <af-table-column width="80" align="center" prop="registerPerson" label="登记人"></af-table-column>
        <af-table-column width="160" align="center" prop="registrationTime" label="登记时间" ></af-table-column>
        <af-table-column width="150" align="center" label="是否系统新增">
          <template slot-scope="scope">{{ scope.row.additionType?'是':'否' }}</template>
        </af-table-column>
      </el-table>

      <!-- <div style="height:80px"></div> -->
      <div class="block">
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[20, 50, 100, 200,500]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            background
          ></el-pagination>
        </div>
      </div>
    </div>

    <hr />
    <div>
      
      
      <div class="container">
        <div class="aside">
          <div class="vp-tite" style="margin-bottom:15px">
        <span style="font-size: 17.5px; font-weight: bold">LRP录入数据</span>
      </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
            :inline="true"
            size="mini"
          >
            <el-form-item label="条码号">
              <el-input clearable v-model="ruleForm.barcodeCode" disabled style="width:160px"></el-input>
            </el-form-item>
            <!-- <el-form-item label="收样状态">
              <el-input
                v-model="arr.receiveStatusObj[ruleForm.receiveStatus]"
                disabled
                style="width:160px"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="项目类型">
              <div v-for="item in projectTypeNameList">
                <el-input clearable v-model="item.value" disabled style="width:160px"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="样本类型">
              <div v-for="item in sampleTypeNameList">
                <el-input clearable v-model="item.value" disabled style="width:160px"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="送检单位">
              <el-input clearable v-model="ruleForm.inspectionUnit" disabled style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="送检姓名">
              <el-input clearable v-model="ruleForm.submitName" disabled style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label="合作单位">
              <el-input clearable v-model="ruleForm.cooperation" disabled style="width:160px"></el-input>
            </el-form-item>
            <el-form-item label=" " prop></el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" clearable v-model="ruleForm.remark" disabled style="width:440px" ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="middle">
          <el-button size="mini" type="primary" icon="el-icon-right" circle @click="transfer"></el-button>
        </div>
        <div class="main">
          <div class="vp-tite" style="margin-bottom:15px">
        <span style="font-size: 17.5px; font-weight: bold;">对照后数据</span>
      </div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
            :inline="true"
            size="mini"
          >
            <el-form
              :model="ruleForm2"
              :rules="rules"
              ref="ruleForm"
              label-width="110px"
              class="demo-ruleForm"
              :inline="true"
              size="mini"
            >
              <el-form-item label="条码号">
                <el-input clearable v-model="ruleForm2.barcodeCode" disabled style="width:160px"></el-input>
              </el-form-item>
              <!-- <el-form-item label="收样状态">
                <el-input
                  v-model="arr.receiveStatusObj[ruleForm.receiveStatus]"
                  disabled
                  style="width:160px"
                ></el-input>
              </el-form-item> -->
              <el-form-item label="项目类型">
                <div v-for="item in projectTypeNameList2">
                  <el-input clearable v-model="item.value" disabled style="width:160px"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="样本类型">
                <div v-for="item in sampleTypeNameList2">
                  <el-input clearable v-model="item.value" disabled style="width:160px"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="送检单位">
                <el-input clearable v-model="ruleForm2.inspectionUnit" disabled style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="送检姓名">
                <el-input clearable v-model="ruleForm2.submitName" disabled style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label="合作单位">
                <el-input clearable v-model="ruleForm2.cooperation" disabled style="width:160px"></el-input>
              </el-form-item>
              <el-form-item label=" " prop></el-form-item>

              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" clearable v-model="ruleForm2.remark" disabled style="width:440px" ></el-input>
              </el-form-item>
            </el-form>
          </el-form>
        </div>
      </div>
      <div style="float:right;margin:0 10px 10px 0">
        <el-button size="mini" type="primary" @click="lrpCompare">确定对照</el-button>
      </div>
    </div>
  </div>
</template>
  
  <script>
import {
  registerList,
  getLRPbyCode,
  LRPcompare
} from "@/api/technologyManage/index.js";
import { arr, Arr } from "@/utils/data.js";
export default {
  data() {
    return {
      value1: [],
      value2: [],
      restaurants: [],
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 20,
        registerState: ""
      },
      listTotal: 0,
      ruleForm: {},
      ruleForm2: {},
      projectTypeNameList: [{}],
      sampleTypeNameList: [{}],
      projectTypeNameList2: [{}],
      sampleTypeNameList2: [{}],
      id: "",
      arr: {},
      Arr: {},
      loading: false,
      heights: undefined,
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        Arr.barcodeCodeList,
        [
          { value: "aaa", address: "长宁区新渔路144号" },
          {
            value: "bbb",
            address: "上海市长宁区淞虹路661号"
          },
          {
            value: "ccc",
            address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
          }
        ]
      ];
      return array;
    },
    handleSelect(item) {
      console.log(item);
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 20,
        registerState:'',
      };
      this.value1=[]
      this.value2=[]
      this.resetForm("queryForm");
      this.getList();
    },
    getList() {
      this.loading = true;
      this.params.additionType = 1;
      // this.params.isCompare = 0;
      registerList(this.params).then(res => {
        this.tableData = res.rows;
        this.listTotal = res.total;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      this.getList();
    },
    timeChange1() {
      if (!this.value1) {
        this.value1 = [];
      }
      this.params.entryStartDate = this.value1[0];
      this.params.entryEndDate = this.value1[1];
    },
    timeChange2() {
      if (!this.value2) {
        this.value2 = [];
      }
      this.params.registrationStartTime = this.value2[0];
      this.params.registrationEndTime = this.value2[1];
    },
    getLRPdata(row) {
      getLRPbyCode({ barcodeCode: row.barcodeCode }).then(res => {
        this.ruleForm = res.data[0];
        this.projectTypeNameList = [];
        this.sampleTypeNameList = [];
        res.data.forEach(el => {
          this.projectTypeNameList.push({ value: el.projectTypeName });
          this.sampleTypeNameList.push({ value: el.sampleTypeName });
        });
      });
      this.ruleForm2 = row;
      // console.log(row);
      this.projectTypeNameList2 = [];
      this.sampleTypeNameList2 = [];
      this.projectTypeNameList2.push({ value: row.projectTypeName });
      this.sampleTypeNameList2.push({ value: row.sampleTypeName });
    },
    transfer() {
      // 先把ID存起来防止被覆盖，对照用
      this.id = this.ruleForm2.id;
      this.ruleForm2 = this.ruleForm;
      this.projectTypeNameList2 = this.projectTypeNameList;
      this.sampleTypeNameList2 = this.sampleTypeNameList;
    },
    lrpCompare() {
      if (this.id == "") {
        this.$message.error("请点击录入按钮");
        return;
      }
      LRPcompare({ id: this.id }).then(() => {
        this.$message.success("对照成功");
        this.getList();
        (this.ruleForm = {}),
          (this.ruleForm2 = {}),
          (this.projectTypeNameList = [{}]),
          (this.sampleTypeNameList = [{}]),
          (this.projectTypeNameList2 = [{}]),
          (this.sampleTypeNameList2 = [{}]);
        this.id = "";
      });
    },
    getDefaultDate() {
      var now = new Date();
      var date = now.getDate();
      // now.setDate(date - 1); //获取前一天
      var y = now.getFullYear();
      var m = (now.getMonth() + 1).toString().padStart(2, "0");
      var d = now
        .getDate()
        .toString()
        .padStart(2, "0");
      var defaultDate = y + "-" + m + "-" + d + " " + "00:00:00";

      var defaultDate2 = y + "-" + m + "-" + d + " " + "23:59:59";
      this.$set(this.value1, 0, defaultDate),
        this.$set(this.value1, 1, defaultDate2);
      // this.$set(this.value2, 0, defaultDate),
      //   this.$set(this.value2, 1, defaultDate2);
      this.timeChange1();
      // this.timeChange2();
    }
  },
  created() {
    this.getDefaultDate();
    this.arr = arr;
    this.Arr = Arr;
  },
  mounted() {
    this.$nextTick(() => {
        // 根据浏览器高度设置初始高度
        this.heights =
          window.innerHeight - this.$refs.refsTable.offsetHeight - 140;
        // 监听浏览器高度变化，修改表格高度
        window.onresize = () => {
          this.heights =
            window.innerHeight - this.$refs.refsTable.offsetHeight - 140;
        };
      });
    
    this.getList();
  }
};
</script>
  
  <style lang="scss" scoped>
.packages {
  position: relative;
  padding-left: 10px;
  // margin-top: 10px;
  background-color: #fff;
  overflow-y: auto;
  height: 87vh;
  .container {
    display: flex;
    justify-content: center;
    // width: 1550px;
    .aside {
      padding-top: 15px;
      width: 700px;
    }
    .main {
      padding-top: 15px;
      width: 700px;
      // flex: 1;
    }
    .middle {
      // line-height: 200%;
      display: flex;
      align-items: center;
      margin-right: 50px;
      // background-color: pink;
    }
  }

  .vp-tite {
    color: #333;
    height: 35px;
    border-bottom: 1px solid #eff1f3;
  }
  .block {
    // margin: 10px;
    // position: fixed;
    // bottom: 0;
    // right:0;
    width: 100%;
    // height: 50px;
    background-color: #fff;
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    bottom: 0px;
    right: 20px;
    z-index: 99;
  }
  .el-col-5 {
    width: 20%;
  }
  .el-autocomplete {
    width: 216px;
  }
  ::v-deep .el-table__body tr.current-row > td {
    background: #a8d6fe !important;
  }
  ::v-deep .el-table__body tr:hover > td {
    background: #a8d6fe !important;
  }
  .el-row {
    display: flex;
    flex-wrap: wrap;
  }

  .el-form-item {
    margin-bottom: 10px;
  }
  .topDiv {
    ::v-deep .el-form-item__label {
      font-size: 12px;
      padding: 0 5px 0 0;
      margin: 0;
    }
  }
  .el-picker-panel__body-wrapper{
    margin-left:30px
  }
}
</style>